<template>
<div>
    <!-- 精选题库预览框 -->
    <el-dialog
      title="题目预览"
      :visible="isShowMyDialog"
      @close="btnClose"
      width="900px"
    >
      <el-row>
        <el-col style="padding-bottom: 10px; padding-top: 10px" :span="6"
          >【题型】：{{ formatterQuestionType(viewData.questionType) }}</el-col
        >
        <el-col style="padding-bottom: 10px; padding-top: 10px" :span="6"
          >【编号】：{{ viewData.id }}</el-col
        >
        <el-col style="padding-bottom: 10px; padding-top: 10px" :span="6"
          >【难度】：{{ formatterDifficulty(viewData.difficulty) }}</el-col
        >
        <el-col style="padding-bottom: 10px; padding-top: 10px" :span="6"
          >【标签】：{{ viewData.tags }}</el-col
        >
        <el-col style="padding-bottom: 10px; padding-top: 10px" :span="6"
          >【学科】：{{ viewData.subjectName }}</el-col
        >
        <el-col style="padding-bottom: 10px; padding-top: 10px" :span="6"
          >【目录】：{{ viewData.directoryName }}</el-col
        >
        <el-col style="padding-bottom: 10px; padding-top: 10px" :span="6"
          >【方向】：{{ viewData.direction }}</el-col
        >
      </el-row>
      <hr />
      <span>【题干】：</span>
      <div
        style="
          margin-top: 15px;
          margin-bottom: 15px;
          margin-left: 5px;
          color: blue;
        "
        v-html="viewData.question"
      ></div>
      <div style="margin-left: 5px">
        <div style="margin-bottom: 5px">
          {{ flag ? "单选题" : "多选题" }} 选项：（以下选中的选项为正确答案）
        </div>
        <div
          style="padding: 8px 0px"
          v-for="item in viewData.options"
          :key="item.id"
        >
          <el-radio v-if="flag" v-model="myIsRight" :label="item.isRight">{{
            item.title
          }}</el-radio>
          <el-checkbox v-else :checked="item.isRight === 1 ? true : false">{{
            item.title
          }}</el-checkbox>
        </div>
      </div>
      <hr />
      <div style="margin-top: 15px; margin-bottom: 15px">
        【参考答案】：<el-button @click="showVideo" type="danger" size="small"
          >视频答案预览</el-button
        >
      </div>
      <div style="margin-bottom: 15px; margin-left: 5px" v-show="isShowVideo">
        <video width="320" height="240" controls>
          <source :src="viewData.videoURL"/>
        </video>
      </div>
      <hr />
      <div style="margin-top: 15px; margin-bottom: 15px">
        【答案解析】：<span style="margin-right: 10px" v-html="viewData.answer"></span>
      </div>
      <hr />
      <div style="margin-top: 15px; margin-bottom: 15px">
        【题目备注】：{{viewData.remarks}}
      </div>
      <template #footer>
        <el-row type="flex" justify="end">
          <el-button type="primary" @click="btnClose">关闭</el-button>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import * as baseConstanst from '../../api/hmmm/constants'
export default {
  props: {
    isShowMyDialog: {
      type: Boolean,
      default: false
    },
    viewData: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      flag: true, // flag 为true时候, 显示单选框
      myIsRight: 1,
      isShowVideo: false
    }
  },
  methods: {
    btnClose () {
      this.flag = true
      this.isShowVideo = false
      this.$emit('update:isShowMyDialog', false)
    },
    // 格式化难度
    formatterDifficulty (cellValue) {
      const obj = baseConstanst.difficulty.find(
        (item) => Number(cellValue) === item.value
      )
      return obj?.label || '未知'
    },
    // 格式化题型
    formatterQuestionType (cellValue) {
      const obj = baseConstanst.questionType.find(
        (item) => Number(cellValue) === item.value
      )
      return obj?.label || '未知'
    },
    // 视频预览
    showVideo () {
      this.isShowVideo = !this.isShowVideo
    }
  },
  watch: {
    viewData: {
      handler (newVal) {
        // console.log(newVal)
        const checkedArr = newVal?.options.filter((item) => item.isRight === 1)
        // 如果筛选出来的数组长度 大于1 说明是一个多选题
        // console.log(checkedArr)
        if (checkedArr.length > 1) this.flag = false
      }
    }
  }
}
</script>

<style>

</style>
